<template>
  <yy-paging
    v-model="dataList"
    class="!bg-[#fff]"
    @query="queryList"
    ref="paging"
    :auto="true"
    @scroll="scroll"
    :refresher-enabled="false"
  >
    <template #top>
      <u-navbar
        back-text=""
        :is-back="false"
        :background="{ backgroundColor: isScroll ? '#FFFFFF' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
        <view class="grid grid-cols-3 items-center px-3 w-full">
          <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
            <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
          </view>
          <view class="flex col-span-1 justify-center">
            <view class="text-[1rem] text-[#000] font-bold"> 意见反馈 </view>
          </view>
          <view class="flex col-span-1 justify-end" @click="vk.navigateTo('/pages/my/myFeedback')">
            <!-- isReturnMessage -->
            <view class="relative">
              <view class="text-[.875rem] text-[#5C6068]"> 我的反馈 </view>

              <view
                class="size-[.5rem] top absolute -top-1 -right-1 bg-red-600 rounded-full"
                v-if="Number(dataList[0].unread)"
              ></view>
            </view>
          </view>
        </view>
      </u-navbar>
    </template>
    <template #empty>
      <yy-empty></yy-empty>
    </template>
    <template #loadingMoreNoMore>
      <yy-nomore text=""></yy-nomore>
    </template>

    <view class="flex flex-col gap-4 p-4">
      <view class="text-[.875rem] text-[#161A24]"> 反馈内容* </view>
      <view class="bg-[#F4F6F8] rounded-[.75rem] flex flex-col gap-1 p-4">
        <textarea
          placeholder="请填写你的问题或建议"
          maxlength="200"
          v-model="description"
          class="w-full"
          rows="5"
        ></textarea>
        <view class="flex justify-end text-[.75rem] text-[#C0C4CC]">
          <view>{{ description.length }}/200</view>
        </view>
      </view>

      <view class="text-[.875rem] text-[#161A24]">
        <text> 上传图片</text>
        <text class="text-[.75rem] text-[#C1C4C9]">{{ iamgesList.length }}/3</text>
      </view>
      <view class="grid grid-cols-3 gap-3">
        <view
          class="bg-[#F4F6F8] rounded-[.5rem] aspect-square flex justify-center items-center relative border overflow-hidden"
          v-for="(i, k) in iamgesList"
          :key="k"
        >
          <image
            :src="i"
            class="size-full"
            mode="aspectFill"
            @click="
              vk.myfn.previewImage({
                urls: iamgesList,
                current: k
              })
            "
          />
          <view
            @click="deleteImage(k)"
            class="w-[1.25rem] h-[1.25rem] bg-[#000000]/40 rounded-[0rem_.5rem_0rem_.5rem] absolute right-0 top-0 flex justify-center items-center"
          >
            <u-icon name="close" color="#fff" size="20"></u-icon>
          </view>
        </view>
        <view
          v-if="iamgesList.length < 3"
          @click="uploads"
          class="bg-[#F4F6F8] rounded-[.5rem] aspect-square flex justify-center items-center"
        >
          <image src="/static/dddr39.png" class="size-[1.75rem]" mode="aspectFill" />
        </view>
      </view>

      <view class="text-[.875rem] text-[#161A24]"> 联系方式* </view>
      <view class="bg-[#F4F6F8] h-[2.5rem] rounded-[.5rem] px-4 flex items-center">
        <input type="tel" maxlength="11" placeholder="请输入联系方式" v-model="contact" class="w-full" />
        <image src="/static/dddr42.png" v-if="contact" class="size-4" mode="aspectFill" @click="contact = ''" />
      </view>
    </view>
    <template #bottom>
      <view class="pb-env">
        <view class="px-4 py-3" style="">
          <button
            @click="submit"
            class="btn after:border-none flex justify-center rounded-full h-[2.75rem] items-center"
            :class="disabled ? '!bg-[#00A9AB]/60' : '!bg-[#00A9AB]'"
            :disabled="disabled"
            :loading="loading"
          >
            <view class="text-[1rem] text-[#E5F6F6]">提交</view>
          </button>
        </view>
      </view>
    </template>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        iamgesList: [], // 图片列表
        automatic: false, // 是否自动加载
        contact: '', // 联系方式
        description: '', // 反馈内容
        unread_num: '',
        disabled: false,
        loading: false
      }
    },
    onload() {},

    methods: {
      async submit() {
        vk.pubfn.debounce(async () => {
          if (!this.description) return vk.toast('请输入反馈内容')
          // if (this.iamgesList.length === 0) return vk.toast('请上传图片')
          if (!this.contact) return vk.toast('请输入联系方式')
          if (!/^1[3-9]\d{9}$/.test(this.contact)) return vk.toast('请输入正确的手机号码')

          let obj = {
            description: this.description,
            contact: this.contact,
            image: this.iamgesList.join('|')
          }
          let res = await api.feedback(obj)
          vk.toast(res.msg)
          if (!res.code) return
          // 清空表单数据
          this.contact = ''
          this.description = ''
          this.iamgesList = []
          vk.navigateTo('/pages/my/myFeedback')
        }, 1000)
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        let res = await api.isReturnMessage()
        this.$refs.paging.complete([res.data])
      },

      deleteImage(k) {
        this.iamgesList.splice(k, 1)
      },
      async uploads() {
        try {
          const url = await vk.myfn.uploadImage({
            count: 3,
            topic: 'products'
          })
          this.iamgesList = [...this.iamgesList, ...url]
        } catch (err) {
          console.error('上传失败:', err)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #ffffff !important;
  }
</style>
